<template>
  <el-main>
    <el-row class="search1">
      <el-col :span="3">
        <el-input
          v-model="input"
          placeholder="请输入姓名"
          @change="searchenter"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" class="searchbtn" @click="searchbtn"
          >查询</el-button
        >
      </el-col>
    </el-row>
    <el-row class="addlist">
      <el-button type="primary" @click="addDialog">新增</el-button>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{ background: 'rgb(39,49,70)', color: '#ffffff' }"
        >
          <el-table-column prop="id" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="" label="回访日期" width="180">
            <!-- <template scope="scope">
              {{scope.row.visitDate | dateFormat}}
            </template> -->
            {{ tableData.visitDate | dateFormat }}
          </el-table-column>

          <el-table-column prop="memberName" label="被干预人">
          </el-table-column>
          <el-table-column prop="adminName" label="回访人员"> </el-table-column>
          <el-table-column prop="visitMethod" label="方式"> </el-table-column>
          <el-table-column prop="visitContext" label="回访内容">
          </el-table-column>
          <el-table-column prop="feedback" label="反馈信息"> </el-table-column>
          <el-table-column prop="result" label="处理结果"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="open(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row class="page">
      <el-col :span="8" :offset="14">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="Pagesize"
            :page-sizes="[5, 10, 30, 40, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Number(count)"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- 新增 -->
    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-tabs v-model="addActiveName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-row>
              <el-col :span="11">
                <el-form-item label="档案号" prop="fileNumber">
                  <el-input
                    v-model="form.fileNumber"
                    @blur="searchmemberName"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="被干预人" prop="memberName">
                  <el-input v-model="form.memberName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="回访日期" required>
                  <el-form-item prop="visitDate">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="form.visitDate"
                      style="width: 100%"
                      value-format="timestamp"
                    ></el-date-picker>
                  </el-form-item>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="具体时间" required>
                  <el-form-item prop="visitTime">
                    <el-time-picker
                      placeholder="选择时间"
                      v-model="form.visitTime"
                      style="width: 100%"
                      value-format="timestamp"
                    >
                      ></el-time-picker
                    >
                  </el-form-item>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="方式" prop="visitMethod">
              <el-select v-model="form.visitMethod">
                <el-option label="微信" value="微信"></el-option>
                <el-option label="电话" value="电话"></el-option>
              </el-select>
            </el-form-item>

            <el-row>
              <el-col :span="22">
                <el-form-item label="回访内容" prop="visitContext">
                  <el-input
                    v-model="form.visitContext"
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="反馈信息" prop="feedback">
                  <el-input v-model="form.feedback" type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="处理结果" prop="result">
                  <el-input v-model="form.result" type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="附件" name="second">
            <el-col :span="22">
              <el-form-item label="主题" :label-width="formLabelWidth">
                <el-input
                  v-model="form.theme"
                  autocomplete="off"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="数据文件" :label-width="formLabelWidth">
                <!-- <el-input
                  autocomplete="off"
                  type="file" 
                  @change="getfile($event)"
                ></el-input> -->
                <input type="file"  @change="getfile($event)">
              </el-form-item>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVisit('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible1">
      <el-form
        :model="updataform"
        :rules="updatarules"
        ref="updataruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-tabs v-model="updataActiveName" @tab-click="handleClick1">
          <el-tab-pane label="基本信息" name="first">
            <el-row>
              <el-col :span="11">
                <el-form-item label="被干预人" prop="memberName">
                  <el-input v-model="updataform.memberName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="回访人" prop="adminName">
                  <el-input v-model="updataform.adminName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="回访日期" required>
                  <el-form-item prop="visitDate">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="updataform.visitDate"
                      style="width: 100%"
                      value-format="timestamp"
                    ></el-date-picker>
                  </el-form-item>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="方式" prop="visitMethod">
              <el-select v-model="updataform.visitMethod">
                <el-option label="微信" value="微信"></el-option>
                <el-option label="电话" value="电话"></el-option>
              </el-select>
            </el-form-item>

            <el-row>
              <el-col :span="22">
                <el-form-item label="回访内容" prop="visitContext">
                  <el-input
                    v-model="updataform.visitContext"
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="反馈信息" prop="feedback">
                  <el-input
                    v-model="updataform.feedback"
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="处理结果" prop="result">
                  <el-input
                    v-model="updataform.result"
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="附件" name="second">
            <el-col :span="22">
              <el-form-item label="主题" :label-width="formLabelWidth">
                <el-input
                  v-model="updataform.theme"
                  autocomplete="off"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="数据文件" :label-width="formLabelWidth">
                <el-input
                  v-model="updataform.file"
                  autocomplete="off"
                  type="file"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="updataVisit('updataruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      file:'',
      formLabelWidth: "120px",
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        adminName: "", //回访人员
        memberName: "",
        created: "", //不传
        deleted: "", //不穿
        feedback: "", //反馈信息
        file: "", //文件路径
        fileNumber: "",
        memberId: "", //被干预人id
        result: "", //处理结果
        updated: "", //不传
        visitContext: "", //回访内容
        visitDate: "", //回访日期
        visitMethod: "", //回访方式
        id: "",
        visitTime: "",
        delivery: false,
        theme: "", //主题
      },
      rules: {
        fileNumber: [
          { required: true, message: "请输入档案号", trigger: "blur" },
        ],
        memberName: [
          { required: true, message: "请输入被干预人", trigger: "blur" },
        ],
        visitContext: [
          { required: true, message: "请输入回访内容", trigger: "change" },
        ],
        result: [
          { required: true, message: "请输入处理结果", trigger: "change" },
        ],
        feedback: [
          { required: true, message: "请输入反馈信息", trigger: "change" },
        ],
        visitMethod: [
          { required: true, message: "请选择回访方式", trigger: "change" },
        ],
        visitDate: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        visitTime: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
      },
      //修改
      updataform: {
        adminName: "", //回访人员
        memberName: "",
        created: "", //不传
        deleted: "", //不穿
        feedback: "", //反馈信息
        file: "", //文件路径
        fileNumber: "",
        memberId: "", //被干预人id
        result: "", //处理结果
        updated: "", //不传
        visitContext: "", //回访内容
        visitDate: "", //回访日期
        visitMethod: "", //回访方式
        id: "",
        visitTime: "",
        delivery: false,
        theme: "", //主题
      },
      updatarules: {
        adminName: [
          { required: true, message: "请输入回访人", trigger: "blur" },
        ],
        memberName: [
          { required: true, message: "请输入被干预人", trigger: "blur" },
        ],
        visitContext: [
          { required: true, message: "请输入回访内容", trigger: "change" },
        ],
        result: [
          { required: true, message: "请输入处理结果", trigger: "change" },
        ],
        feedback: [
          { required: true, message: "请输入反馈信息", trigger: "change" },
        ],
        visitMethod: [
          { required: true, message: "请选择回访方式", trigger: "change" },
        ],
        visitDate: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        visitTime: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
      },

      Pagesize: 5, //表格每页显示的条数
      addActiveName: "first",
      updataActiveName:"first",
      dialogVisible: false,
      input: "",
      tableData: [],
      currentPage: 1, //当前是第几页
      count: "", //总条数
    };
  },
  methods: {
    /**上传文件 */
    getfile(e){
      // ////console.log(e);
      this.file= e.target.files[0]
      ////console.log(this.file);
      let Myfile=new FormData()
      Myfile.append('file',this.file)
      
       this.$axios({
      url:'/visit/uploadFile',
      method:'post',
      data:Myfile
    }).then(res=>{
      // ////console.log(res.data);
      this.form.file=res.data
    })
    },
   
    /**搜索请求 */
    searchname() {
      this.$axios({
        url: "/visit/list",
        method: "post",
        data: {
          memberName: this.input.trim(),
          page: this.currentPage,
          limit: this.Pagesize,
        },
      }).then((res) => {
        ////console.log(res);
        this.tableData = res.data;
        this.count = res.count;
      });
    },
    /**档案号失去焦点时请求 姓名  */
    searchmemberName() {
      this.$axios({
        url: "/visit/findMember",
        method: "GET",
        params: { fileNumber: this.form.fileNumber },
      })
        .then((res) => {
          // ////console.log(res.data);
          // ////console.log(this.form);
          this.form.memberName = res.data.memberName;
          this.form.memberId = res.data.id;
          // ////console.log(this.form);
        })
        .catch((err) => {});
    },
    addDialog() {
      this.dialogFormVisible = true;
    },

    /**新增提交模特框按钮 */
    addVisit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          
       
          this.$axios({
            url: "/visit/add",
            method: "post",
            data: {
              feedback: this.form.feedback,
              file: this.form.file,
              memberId: this.form.memberId,
              result: this.form.result,
              theme: this.form.theme,
              visitContext: this.form.visitContext,
              visitDate: this.form.visitDate,
              visitMethod: this.form.visitMethod,
              visitTime: this.form.visitTime,
            },
          })
            .then((res) => {
              ////console.log(res);
              this.$refs[formName].resetFields();
              visitList();
              if(res.code=50000){
                this.open1()
              }else{
               this.$refs[formName].resetFields();
               this.form.theme=''
               visitList();
               this.dialogFormVisible = false;
              }
              
            })
            .catch((err) => {
              ////console.log(err);
            });
        } else {
          ////console.log("error submit!!");
          return false;
        }
      });
    },
     open1() {
        this.$message('档案号不存在，请核实档案号');
      },
    /** 模态框选项卡*/
    handleClick(tab, event) {
      //  ////console.log(tab,event);
      //   ////console.log(tab.name);
    },
    handleClick1(){

    },

    /**搜索 回车*/
    searchenter(val) {
      // ////console.log(val);
       this.currentPage=1
      this.input = val;
      this.searchname();
    },
    /**搜索 按钮 */
    searchbtn() {
      // ////console.log(this.input);
      this.currentPage=1
      this.searchname();
    },
    /** 删除按钮 */
    open(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // ////console.log(index);
          // ////console.log(row.id);
          // ////console.log(this.tableData);
          this.$axios({
            url: "/visit/delete",
            method: "get",
            params: { id: row.id },
          })
            .then((res) => {
              // ////console.log(res);
              this.visitList();
            })
            .catch((err) => {
              ////console.log(err);
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**打开编辑模态框 */
    handleEdit(index, row) {
      // ////console.log(123);
      this.dialogFormVisible1 = true;
      // ////console.log(row);
      this.updataform.adminName = row.adminName;
      this.updataform.feedback = row.feedback;
      this.updataform.id = row.id;
      this.updataform.memberName = row.memberName;
      this.updataform.result = row.result;
      this.updataform.visitContext = row.visitContext;
      this.updataform.visitDate = row.visitDate;
      this.updataform.visitMethod = row.visitMethod;
      this.updataform.adminName = row.adminName;
      
    },
    /**修改 */
    updataVisit(formName){
       
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios({
        url:"/visit/update",
        method:"post",
        data:{'adminName':this.updataform.adminName,'feedback':this.updataform.feedback,'id':this.updataform.id,
        'result':this.updataform.result,'theme':this.updataform.theme,
        'visitContext':this.updataform.visitContext,
        'visitDate':this.updataform.visitDate,'visitMethod':this.updataform.visitMethod,
        }
      }).then(res=>{
        // ////console.log(res);
        this.dialogFormVisible1 = false;
        this.visitList();
      }).catch(err=>{
        // ////console.log(err);
      })
            } else {
            ////console.log('error submit!!');
            return false;
          }
        })
            


    },
    handleSizeChange(val) {
      // ////console.log(`每页 ${val} 条`);
      ////console.log(this.input);
      if(this.input){
        
        this.Pagesize = val;
        this.searchname()
      }else{
     this.Pagesize = val;
      this.visitList();
       ////console.log(this.input);
      }
      
    },
    handleCurrentChange(val) {
      // ////console.log(`当前页: ${val}`);
      ////console.log(this.input);
      if (this.input) {
         this.currentPage = val;
        this.searchname()
      }else{
      this.currentPage = val;
      this.visitList();
      }

      
    },
    /**渲染页面表格 */
    visitList() {
      this.$axios({
        method: "post",
        url: "/visit/list",
        data: { page: this.currentPage, limit: this.Pagesize },
      })
        .then((res) => {
          this.count = res.count;

          this.tableData = res.data;
          // ////console.log(this.tableData);
        })
        .catch((err) => {
          ////console.log(err);
        });
    },
  },
  created() {
    this.visitList();
  },
  beforeUpdate() {
    // this.visitList()
  },
};
</script>

<style scoped>
.search1 {
  margin-bottom: 10px;
}
.searchbtn {
  margin-left: 30px;
}
.page {
  margin-top: 30px;
}
.addlist {
  margin-bottom: 10px;
}
.block {
  font-size: 20px;
}
</style>

